<template>
  <div class="theReport">
    <div class="aroundOf">学习报告</div>
    <div class="title_report">{{ topData.cname }}</div>
    <el-col :span="24">
      <el-card shadow="never">
        <div class="information">
          <div>
            姓名：<span>{{ topData.zhename }}</span>
            学科：<span>{{ topData.subject }}</span>
            年级：<span>{{ topData.clas }}</span>
            时间：<span>{{ topData.xueDate }}</span>
            用时：<span v-if="topData.shi < 60">00分{{ topData.shi }}秒</span>
                  <span v-else>{{ topData.shi }}</span>
          </div>
          <p v-if="time3 == 100">同学您好，您本次课程用时{{ time }}，实验步骤总数{{ pingJun.up || 0 }}步，完成数{{ pingJun.accomplish || 0 }}步，得分{{ time3 }}分，超过{{ pingJun.exceed || 0 }}%的同学，在实验操作中步骤和过程完整，实验数据和结果正确，完成质量好，表现优秀，继续保持！</p>

          <p v-else-if="80 <= time3 && time3 <= 99">同学您好，您本次课程用时{{ time }}，实验步骤总数{{ pingJun.up || 0 }}步，完成数{{ pingJun.accomplish || 0 }}步，得分{{ time3 }}分，超过{{ pingJun.exceed || 0 }}%的同学，在实验操作中步骤和过程较完整，实验数据记录较完整，实验内容和结果也较完善，完成质量较好，但还有进步空间哦！</p> 

           <p v-else-if="60 <= time3 && time3 <= 79">同学您好，您本次课程用时{{ time }}，实验步骤总数{{ pingJun.up || 0 }}步，完成数{{ pingJun.accomplish || 0 }}步，得分{{ time3 }}分，超过{{ pingJun.exceed || 0 }}%的同学，在实验操作中步骤和过程完成度合格，试验数据和记录合格，完成质量合格，还需要加油哦！</p> 

          <p v-else>同学您好，您本次课程用时{{ time }}，实验步骤总数{{ pingJun.up || 0 }}步，完成数{{ pingJun.accomplish || 0 }}步，得分{{ time3 }}分，超过{{ pingJun.exceed || 0 }}%的同学，在实验操作中步骤和过程完成度较低，实验记录有不合理数据，需要多加练习，提高熟练程度和记录数据的准确性！</p>
          
        </div>
      </el-card>
    </el-col>

    <div class="the_second">
      <the-second :title="title" :time="time" class="experiment">
        <div slot = "falling" class="compare" v-if="isShowFu">
          <span>较上一次</span><i class="el-icon-caret-bottom"></i>{{ pingJun.lastime || 0 }}%
        </div>
        <div slot = "falling" class="compare" v-else>
          <span>较上一次</span><i class="el-icon-caret-top"></i>{{ pingJun.lastime || 0 }}%
        </div>
      </the-second>
      <the-second :title="title1" :time="time1" class="average">
        <!-- <span slot="the_total" class="the_total">(完成步骤/总步骤)</span> -->
        <div slot = "falling" class="compare">
          <span style="display: block;height: 27px;"></span>
        </div>
      </the-second>
      <the-second :title="title2" :time="time2" class="teaching">
        <div slot = "falling" class="compare" v-if="isShowFuPi">
          <span>较平均</span><i class="el-icon-caret-bottom"></i>{{ pingJun.lastmeantime || 0 }}%
        </div>
        <div slot = "falling" class="compare" v-else>
          <span>较平均</span><i class="el-icon-caret-top"></i>{{ pingJun.lastmeantime || 0 }}%
        </div>
      </the-second>
      <the-second :title="title3" :time="time3" class="grant">
        <!-- <span slot="the_total" class="the_total">(时段内完成的步骤数)</span> -->
        <div slot = "falling" class="compare" v-if="isShowFuDe">
          <span>较平均</span><i class="el-icon-caret-bottom"></i>{{ pingJun.exceed || 0 }}%
        </div>
        <div slot = "falling" class="compare" v-else>
          <span>较平均</span><i class="el-icon-caret-top"></i>{{ pingJun.exceed || 0 }}%
        </div>
      </the-second>
    </div>

    <!-- 下方点评 -->
    <div class="steps">
      <!-- <steps :steps="steps"></steps> -->
      <el-timeline>
        <el-timeline-item :timestamp="item.name" placement="top" v-for="(item,index) in steps" :key="index">
          <div class="zeroTitle">
            得分：<span>{{ item.score == null ? '0' : item.score }}分</span>
            用时：<span>{{ item.shi == '00秒' ? '0' : item.shi }}</span>
          </div>
          <h1 class="zeroTitle_h1">点评：</h1>
          <el-card shadow="never" :body-style="{background: 'rgba(242,242,242,.5)'}">
            <p>{{ item.remark == null ? '暂无点评' : item.remark }}</p>
          </el-card>
        </el-timeline-item>
        <el-timeline-item></el-timeline-item>
      </el-timeline>
    </div>

  </div>
</template>

<script>
import theSecond from '../../components/thieUser/theSeconds.vue';
import steps from '../../components/thieUser/steps.vue';
import { timestampToTimeShi } from '../../utils/util';
export default {
  components: { theSecond, steps },
  data() {
    return {
      title: '本次学习时长',
      time: '0',
      title1: '完成实验步骤',
      time1: '0',
      title2: '平均实验时长',
      time2: '0',
      title3: '得分',
      time3: '0',
      steps: [],
      newDate: [],  //  传过来的数据
      topData: {} ,  // 请求过来的上面的数据
      pingJun: {},
      isShowFu: false,   // 控制本次学习时长升高降低显隐
      isShowFuPi: false, // 控制平均实验时长升高降低显隐
      isShowFuDe: false, // 控制得分升高降低显隐
    }
  },
  mounted() {
    // console.log(this.$route.params);
    this.newDate = JSON.parse(sessionStorage.getItem('reportRi'));
    this.toObtain();
  },
  methods: {
    // 获取id
    toObtain() {
      this.$http.theUser.dataBaoGao({id: this.newDate.id}).then( res => {// console.log(res)
        this.topData = res.data;
        if(this.topData.shi >= 60) {  this.topData.shi = this.time = timestampToTimeShi(res.data.shi); } 
        else if(this.topData.shi < 60) { this.topData.shi = this.time = timestampToTimeShi(res.data.shi); } 
        this.time1 = res.data.accomplish + '';
        this.time2 = timestampToTimeShi(res.data.meantime);
        this.time3 = res.data.score + '';
        this.pingJun = res.data;
        if(res.data.lastime.toString()[0] == '-') {
          this.isShowFu = true;
          this.pingJun.lastime = res.data.lastime == null ? 0 : res.data.lastime.toFixed(2).slice(1);
        } else {
          this.isShowFu = false;
          this.pingJun.lastime = res.data.lastime == null ? 0 : res.data.lastime.toFixed(2);
        }
        if(res.data.lastmeantime.toString()[0] == '-'){
          this.isShowFuPi = true;
          this.pingJun.lastmeantime = res.data.lastmeantime == null ? 0 : res.data.lastmeantime.toFixed(2).slice(1);
        } else {
          this.isShowFuPi = false;
          this.pingJun.lastmeantime = res.data.lastmeantime == null ? 0 : res.data.lastmeantime.toFixed(2);
        }
        if(res.data.exceed.toString()[0] == '-') {
          this.isShowFuDe = true;
          this.pingJun.exceed = res.data.exceed == null ? 0 : res.data.exceed.toFixed(2).slice(1);
        } else {
          console.log(this.pingJun.exceed,res.data.exceed.toFixed(2).slice(1))
          this.isShowFuDe = false;
          this.pingJun.exceed = res.data.exceed == null ? 0 : res.data.exceed.toFixed(2);
        }
      })
      this.$http.theUser.dataBaoGaoBuZhou({id: this.newDate.id}).then( res => {
        this.steps = res.data;
        this.steps.filter( item => {
          item.shi = timestampToTimeShi(item.shi)
        })
      })
    }
  }
}
</script>

<style scoped>
@import '../../assets/css/theUser/theReport.scss';
</style>